<template>
  <div>
    <el-drawer v-model="drawerStore.tagDrawer" direction="rtl">
      <template #header>
        <h4>标签</h4>
      </template>
      <template #default>
        <el-form
          :model="formData"
          label-width="120px"
          style="margin-top: 20px; max-width: 600px;"
        >
          <el-form-item label="ID">
            <el-input v-model="formData.id" disabled/>
          </el-form-item>
          <el-form-item label="标签名">
            <el-input v-model="formData.name"/>
          </el-form-item>
          <el-form-item label="创建时间">
            <el-input v-model="formData.createTime"/>
          </el-form-item>
          <el-form-item label="更新时间">
            <el-input v-model="formData.updateTime"/>
          </el-form-item>
          <el-form-item label="状态">
            <el-input v-model="formData.status"/>
          </el-form-item>
        </el-form>
      </template>
      <template #footer>
        <div style="flex: auto">
          <el-button @click="cancelClick">取消</el-button>
          <el-button type="primary" @click="confirmClick">确认</el-button>
        </div>
      </template>
    </el-drawer>
  </div>
</template>

<script setup lang="ts">
import { useDrawerStore } from '@/stores/drawer';
import { updateTag } from '@/apis/admin/tags';

const drawerStore = useDrawerStore();
const formData = drawerStore.tagRow;

function cancelClick() {
  drawerStore.tagDrawer = false;
}

async function confirmClick() {
  const form = {
    id: formData.id,
    status: formData.status,
    name: formData.name,
  }
  await updateTag(form);
  drawerStore.tagDrawer = false;
}

</script>

<style scoped>

</style>
